<template>
  <el-form ref="ruleForm" :model="ruleForm" label-width="80px" size="small">
    <el-row>
      <el-col :span="6">
        <el-form-item label="学科" prop="subjectID">
          <el-select @change="SubjectChange" v-model="ruleForm.subjectID" placeholder="请选择">
            <el-option
              v-for="item in subjectList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="二级目录" prop="catalogID">
          <el-select v-model="ruleForm.catalogID" placeholder="请选择">
            <el-option
              v-for="item in SecondaryDirectoryList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="标签" prop="tags">
          <el-select v-model="ruleForm.tags" placeholder="请选择">
            <el-option
              v-for="item in LabelList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="关键字" prop="keyword">
          <el-input
            v-model="ruleForm.keyword"
            placeholder="根据题干搜索"
          ></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="6">
        <el-form-item label="试题类型" prop="questionType">
          <el-select v-model="ruleForm.questionType" placeholder="请选择">
            <el-option
              v-for="(item, index) in QuestionTypeList"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="难度" prop="difficulty">
          <el-select v-model="ruleForm.difficulty" placeholder="请选择">
            <el-option
              v-for="(item, index) in DifficultyList"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="方向" prop="direction">
          <el-select v-model="ruleForm.direction" placeholder="请选择">
            <el-option
              v-for="item in DirectionList"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="录入人" prop="creatorID">
          <el-select v-model="ruleForm.creatorID" placeholder="请选择">
            <el-option
              v-for="item in EntryPersonList"
              :key="item.username"
              :label="item.username"
              :value="item.username"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="6">
        <el-form-item label="题目备注" prop="remarks">
          <el-input v-model="ruleForm.remarks"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="企业简称" prop="shortName">
          <el-input v-model="ruleForm.shortName"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="城市" prop="province">
          <el-col :span="11" style="width: 48%; margin-right: 2%">
            <el-select
              type="date"
              placeholder="请选择"
              v-model="ruleForm.province"
              style="width: 100%"
              @change="changecity()"
            >
              <el-option
                v-for="(item, index) in CityList"
                :key="index"
                :label="item.pro"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-col>
          <el-col :span="11" style="width: 50%">
            <el-select
              placeholder="请选择"
              v-model="ruleForm.City2"
              style="width: 100%"
            >
              <el-option
                v-for="(item, index) in City2List"
                :key="index"
                :label="item.pro"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-col>
        </el-form-item>
      </el-col>
      <el-col :span="6" style="text-align: right">
        <el-button @click="resetForm('ruleForm')">清除</el-button>
        <el-button type="primary" @click="search">搜索</el-button>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import {
  subjectsName,
  entryPersonList,
  subjectsDetailsA,
  subjectsDetailsB,
} from "../../api/hmmm/questions";
import { provinces, citys2 } from "../../api/hmmm/citys";
import { difficulty, questionType, direction } from "../../api/hmmm/constants";
export default {
  name: "SearchQuestion",
  data() {
    return {
      ruleForm: {
        subjectID: "", // 学科
        catalogID: "", // 二级目录
        tags: "", // 标签
        keyword: "", // 关键字
        questionType: "", // 试题类型
        difficulty: "", // 难度
        direction: "", // 方向
        creatorID: "", // 录入人
        remarks: "", // 题目备注
        shortName: "", // 企业简称
        province: "", // 城市
        city: "", // 城市2
      },
      CityList: [],
      City2List: [],
      LabelList: [],
      subjectList: [],
      QuestionTypeList: questionType,
      DifficultyList: difficulty,
      DirectionList: direction,
      EntryPersonList: [],
      SecondaryDirectoryList: [],
    };
  },
  created() {
    this.subjectsName();
    this.city();
  },
  mounted() {},
  components: {},
  props: {},
  computed: {},

  methods: {
    // 请求学科列表,录入人列表
    async subjectsName() {
      try {
        const { data: name } = await subjectsName();
        const { data: EntryPerson } = await entryPersonList();
        this.subjectList = name;
        this.EntryPersonList = EntryPerson;
      } catch (error) {
        return false;
      }
    },
    // 请求二级目录和标签
    async SubjectChange() {
      try {
        const { data: SecondaryDirectory } = await subjectsDetailsA(
          this.ruleForm.subjectID
        );
        const { data: Label } = await subjectsDetailsB(this.ruleForm.subjectID);
        this.SecondaryDirectoryList = SecondaryDirectory;
        this.LabelList = Label;
      } catch (error) {
        return false;
      }
    },
    // 清除表单
    async resetForm(ruleForm) {
      await this.$refs[ruleForm].resetFields();
      this.$emit('subjectList')
    },
    // 城市
    city() {
      const a = provinces(this.ruleForm.province);
      this.CityList = a;
    },
    changecity() {
      this.City2List = citys2(this.ruleForm.province);
    },

    // 搜索发送请求
    search() {
      this.$emit("subjectList", this.ruleForm);
    },
  },
};
</script>

<style scoped>
.el-select {
  width: 100% !important;
}
</style>
